<script setup lang="ts">
import type { video } from '@/types/video';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { Advice } from '@/pages/index/components/Advice.vue';
import { postCoverUrlAPI } from '@/services/video';
//获取视频封面
const blogCardList = ref<video[]>([])
const postCoverUrlData = async () => {
  const res = await postCoverUrlAPI()
  blogCardList.value = res.data
}
//初始化
onLoad(() => {
  postCoverUrlData()
})
</script>

<template>
  <view class="index">
    <!-- 数据分析 -->
    <view class="fond">
      <view class="modelCard" style="padding-right: 40%;">
        <text style="flex: 1;">前倾</text>
        <view style='width: 15px; height: 100%; background-color: rgba(52, 152, 219, 1);'></view>
      </view>
      <view class="modelCard" style="padding-right: 40%;">
        <text style="flex: 1;">摆臂</text>
        <view style='width: 40%; height: 100%; background-color: rgba(52, 152, 219, 1);'></view>
      </view>
      <view class="modelCard" style="padding-right: 40%;">
        <text style="flex: 1;">跺脚</text>
        <view style='width: 15px; height: 100%; background-color: rgba(52, 152, 219, 1);'></view>
      </view>
      <view class="modelCard">
        <text style="width: 60%;">屈膝</text>
        <view style='width: 60px; height: 100%; background-color: rgba(255, 87, 51, 1);'></view>
      </view>
      <view class="modelCard">
        <text style="width: 60%;">步频</text>
        <view style='width: 30px; height: 100%; background-color: rgba(255, 87, 51, 1);'></view>
      </view>
    </view>
    <!-- 建议 -->
    <Advice></Advice>
    <!-- 推荐 -->
    <text style="line-height: 30px; font-size: 14px; font-weight: 500; color: rgba(0, 0, 0, 1)">改进推荐教程视频</text>
    <scroll-view class="recommend" :scroll-y="true">
      <navigator class="recommendCard" v-for="item in blogCardList" :key="item.videoId"
        :url="`/pages/video/video?id=${item.videoId}`">
        <image style="width: 80px; border-radius: 5px;" :src="item.coverUrl"></image>
        <view style="display: flex;
            height: 70%;flex-direction: column;
            justify-content: space-between;flex: 1;
            margin-left: 16px;
            ">
          <text>{{ item.title }} | {{ item.category }}</text>
          <text>{{ item.username }}</text>
        </view>
        <image style="width: 24px;height: 24px;margin-right: 10px;" src="../static/images/爱心.png">

        </image>
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
.recommend {
  height: 650rpx;
}

.recommendCard {
  height: 90px;
  padding: 5px 5px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 10px;
  margin: 10px 0;
}

.index {
  height: 100%;
  padding: 0px 4%;
  background-color: rgba(245, 245, 245, 1);
}

.advice {
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  margin: 10px 0;
}

.content {
  margin: 15px 2% 0;
}

.item {
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
  padding-right: 16px;
}

.item .text {
  font-size: 16px;
  background-color: rgba(0, 0, 0, 1);
}

.model {
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
}

.modelCard {
  display: flex;
  align-items: center;
  height: 42px;
  font-size: 15px;
  color: black;
  margin-bottom: 4px;
}
</style>
